<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>erp</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- pace -->
    <script src="/plugins/pace-0.7.5/pace.js"></script>
    <link href="/plugins/pace-0.7.5/themes/black/pace-theme-center-circle.css" rel="stylesheet" />
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/plugins/animate/animate.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/css/skins/my_all-skins.css">
    <!-- MyAdminLTE.css -->
    <link rel="stylesheet" href="/css/MyAdminLTE.css">
    <!-- Lobibox -->
    <link rel="stylesheet" href="/plugins/lobibox/css/lobibox.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<#include "left.ftl">
<div class="content-wrapper">
    <section class="content" id="app">
        <!--left-->
        <div class="col-md-5" style="padding: 0">
            <div class="box box-primary">
                <div class="box-body">
                    <form id="addForm" method="post" >
                        <h3 style="padding-top:20px;"><strong>添加商品信息</strong></h3>
                        <div class="form-group">
                            <div class="form-group">
                                <label class="form-inline">商品id</label>
                                <input class="form-control" placeholder="" id="addId" name="commodityid" autocomplete="off" >
                            </div>
                            <div class="form-group">
                                <label class="form-inline">名称</label>
                                <input class="form-control" placeholder="" id="addName" name="commodityname" autocomplete="off" >
                            </div>
                            <div class="form-group">
                                <label class="form-inline">单价</label>
                                <input class="form-control" placeholder="" id="addPrice" name="commodityprice" autocomplete="off">
                            </div>
                            <div class="box-footer clearfix">
                                <button class="btn btn-success pull-right" onclick="addSubmit()">添加</button>
                            </div>
                        </div>
                    </form>
                    <form id="editForm" method="post" action="#">
                        <h3 style="padding-top:20px;"><strong>修改商品信息</strong></h3>
                        <div class="box-body">
                            <div class="form-group">
                                <div class="form-group" style="display: none">
                                    <label class="form-inline">商品id</label>
                                    <input class="form-control" placeholder="" id="editId" name="commodityid" autocomplete="off">
                                </div>
                                <div class="form-group">
                                    <label class="form-inline">名称</label>
                                    <input class="form-control" placeholder="" id="editName" name="commodityname" autocomplete="off">
                                </div>
                                <div class="form-group">
                                    <label class="form-inline">商品单价</label>
                                    <input class="form-control" placeholder="" id="editPrice" name="commodityprice" autocomplete="off">
                                </div>
                            </div>
                            <div class="box-footer clearfix">
                                <button class="btn btn-success pull-right" onclick="editSubmit()">修改</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--right-->
        <div class="col-md-7">
        <div class="box box-primary">
            <table class="table table-hover">
                <tr>
                    <td>商品编号</td>
                    <td>商品名称</td>
                    <td>商品单价</td>
                    <td>操作1</td>
                    <td>操作2</td>
                </tr>
                <tr v-for="el in dataStaff" :id="el.commodityid">
                    <td>{{el.commodityid}}</td>
                    <td>{{el.commodityname}}</td>
                    <td>{{el.commodityprice}}</td>
                    <td><a v-on:click="editCommo(el)">编辑</a></td>
                    <td><a v-on:click="deleteStaffs(el.commodityid)">删除</a></td>
                </tr>
            </table>
        </div>
        </div>
    </section>
</div>
<!-- jQuery 2.2.3 -->
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/js/bootstrap.min.js"></script>
<!--vue-->
<script src="/plugins/vue/vue.js"></script>
<!-- SlimScroll -->
<script src="/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/js/demo.js"></script>
<script src="/plugins/echarts/echarts.min.js"></script>
<script src="/plugins/lobibox/js/lobibox.min.js"></script>
<script src="/js/common.js"></script>
<script>
    getAllTag();
    var vm=new Vue({
        el:'#app',
        data: {
            dataStaff: {}
        },
        methods: {
            getAllTag:function(){
                getAllTag();
            },
            editCommo:function(CommoInfo){
                showEditCommo(CommoInfo);
            },
            deleteStaffs:function (id) {
                deleteStaffs(id);
            }


        }
    });
    //查询所有标签信息
    function getAllTag() {
        $.post("/admin/commoditys", function(result){
            console.log(JSON.stringify(result));
            result=eval(result);
            console.log(JSON.stringify(result));
            vm.dataStaff = result;
        });
    }

    function successFn(data) {
        alert("1");
    }
    function errorFn(data) {
        alert("失败");
    }

    function addSubmit(){
        ajaxSubmitForm("/admin/addCommoditys",$("#addForm").serialize(),success,errorFn);
        function success(data){
            getAllTag(0);
            alert("1");
        }

    }
    function showEditCommo(CommoInfo) {
        $("#editId").val(CommoInfo.commodityid);
        $("#editName").val(CommoInfo.commodityname);
        $("#editPrice").val(CommoInfo.commodityprice);
    }

    //edit
    function editSubmit(){
        ajaxSubmitForm("/admin/editCommoditys",$("#editForm").serialize(),success1,errorFn);
        function success1(data) {
            alert("1");
            getAllTag();
        }
    }
    function deleteStaffs(id) {
        if (confirm("是否要删除此标签?") == false) {
            return;
        }
        ajaxSubmit("/admin/deleteCommodity",JSON.stringify(id),sucess1,errorFn);
        function sucess1(data){
            $("#"+id).remove();
            alert("1");
        }

    }


</script>
</body>
</html>
